<template>
  <div class="container">
    <!-- 题目表头区域 -->
    <el-row :gutter="20" class="row-item">
      <el-col :span="6">
        <span v-if="detailsList.questionType == 1">【题型】:单选题</span>
        <span v-if="detailsList.questionType == 2">【题型】:多选题</span>
        <span v-if="detailsList.questionType == 3">【题型】:简答题</span>
      </el-col>
      <el-col :span="6"
        ><span>【编号】:{{ detailsList.id }}</span></el-col
      >
      <el-col :span="6">
        <!-- 【难度】:{{ detailsList.difficulty }} -->
        <template>
          <span v-if="detailsList.difficulty == 1">【难度】:简单</span>
          <span v-if="detailsList.difficulty == 2">【难度】:一般</span>
          <span v-if="detailsList.difficulty == 3">【难度】:困难</span>
        </template>
      </el-col>
      <el-col :span="6"
        ><span>【标签】:{{ detailsList.tags }}</span></el-col
      >
      <el-col :span="6"
        ><span>【学科】:{{ detailsList.subjectName }} </span></el-col
      >
      <el-col :span="6"
        ><span>【目录】:{{ detailsList.directoryName }}</span></el-col
      >
      <el-col :span="6"
        ><span>【方向】:{{ detailsList.direction }}</span></el-col
      >
    </el-row>
    <hr />
    <!-- 题干区域 -->
    <span>【题干】:</span>
    <div style="color:blue" v-html="detailsList.question"></div>
    <hr />
    <!-- 单选多选选项区域 -->
    <div v-if="detailsList.questionType != 3">
      <span v-if="detailsList.questionType == 1">单选题</span>
      <span v-if="detailsList.questionType == 2">多选题</span>
      <span>选项：(以下选中的为正确答案)</span>
      <!-- 单选框 -->
      <el-radio-group v-model="radio" v-if="detailsList.questionType == 1">
        <el-radio
          class="radio"
          :label="item.isRight"
          v-for="item in detailsList.options"
          :key="item.id"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>
      <!-- 单选框 -->
      <!-- 多选框 -->
      <el-checkbox-group
        v-model="checkList"
        v-else-if="detailsList.questionType == 2"
      >
        <el-checkbox
          :label="item.isRight"
          v-for="item in detailsList.options"
          :key="item.id"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- /多选框 -->
      <hr />
    </div>

    <!-- 单选多选选项区域 -->
    <!-- 参考答案区域 -->
    <div>
      <span>参考答案:</span>&nbsp;
      <el-button type="danger" plain @click="isShowVideo = true"
        >视频答案预览</el-button
      >
      <div>
        <video :src="detailsList.videoURL" autoplay="autoplay" v-if="isShowVideo" style="width: 50%"></video>
      </div>
    </div>

    <hr />
    <!-- /参考答案区域 -->
    <!-- 答案解析区域 -->
    <div class="answer">
      <span>答案解析:</span>
      <span v-html="detailsList.answer"></span>
    </div>
    <hr />
    <!-- /答案解析区域 -->
    <!-- 题目备注区域 -->
    <div class="remarks">
      <span>试题备注:</span>
      <span>{{ detailsList.remarks }}</span>
    </div>
    <!-- /题目备注区域 -->
  </div>
</template>

<script>
import { ItemDetails } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    id: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      isShowVideo: false, // 控制视频控件的显示与隐藏
      detailsList: {}, // 试题详情列表
      radio: 1, // 单选框答案
      checkList: [1] // 多选框答案
    }
  },
  created () {
    console.log(this.detailsList)
    this.getItemDetails()
  },
  methods: {
    // 获取试题详情
    async getItemDetails () {
      // console.log(row.id)
      try {
        const { data } = await ItemDetails(this.id)
        console.log(data)
        this.detailsList = data
        this.playerOptions.sources[0].src = data.videoURL
      } catch (err) {
        console.log('获取试题详情失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .row-item {
    .el-col {
      margin: 10px 0;
    }
  }
  .el-radio-group,
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .el-radio,
    .el-checkbox {
      margin: 10px 0;
    }
  }
  .answer {
    display: flex;
    justify-content: start;
    align-items: center;
    span {
      margin-right: 10px;
    }
  }
  .remarks {
    margin-top: 20px;
    span {
      margin-right: 10px;
    }
  }
  .video-player,
  .vjs-custom-skin {
    width: 540px;
    height: 300px;
    margin: 20px 0;
  }
}
</style>
